<template>
  <div class="HidePrimary" id="Primary">
    <div class="Hidefrist" id="DynamicCss">
      <button class="CloseWindow" @click="CloseWindow">
        <span class="Frist">
          <svg t="1664608715289" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4967" width="15" height="15"><path d="M143.616 47.104l830.08 830.08c26.24 26.24 26.24 69.888 0 96.128-26.24 26.24-69.888 26.24-96.128 0L47.488 143.232c-17.536-26.24-17.536-69.888 0-96.128 26.24-26.24 69.888-26.24 96.128 0z m0 0" fill="#515151" p-id="4968"></path><path d="M982.528 143.232L152.32 973.312c-26.24 26.24-69.888 26.24-96.128 0-26.24-26.24-26.24-69.888 0-96.128L886.4 47.104c26.24-26.24 69.888-26.24 96.128 0 17.408 26.24 17.408 69.888 0 96.128z m0 0" fill="#515151" p-id="4969"></path></svg>
        </span>
      </button>
      <div class="ContxtMain">
        <div class="Fristone">
          <Frist/>
          <Third/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'Vuex'
// 导入中央事件总线
import bus from '../../../../../bus/index'
import Frist from './ContextMain/Frist.vue';
import Third from './ContextMain/third.vue';
export default {
  components: { Frist, Third },
  data() {
    return {
      context:'',
      // 窗口
      scorllfrist:false,
      // 固定样式
      Cancelfrist:true,
      CloseAll:false,
      CloneFrist:'Frist',
    }
  },
  // 传递数据
  created() {
    // 获取数据
    const that =this
    bus.$on('get-function',(data,scorll)=>{
       var Primary =document.getElementById("Primary")
       var DyCss =document.getElementById('DynamicCss')
         if (data=true) {
          //  页面进行展示
            Primary.style.display = "block";
            window.addEventListener("scroll", this.MoveScorll);
         }
        //  动态添加样式
         if (scorll>0) {
           DyCss.style.top=scorll +'px'
         }else{
           DyCss.style.top=0+'px'
         }
    })
    bus.$on('CancelMessage',function(data){
       
        that.UseHide()
        bus.$emit('Cancel',this.Cancelfrist) 
       
    })
    // 接收third的数据
   bus.$on('preserveClose',function(data){
       if (data==true) {
        that.UseHide()
        bus.$emit('Cancel',this.Cancelfrist) 
       }
    })
  },
  // 使用数据
  computed:{
   ...mapState(['HideContext'])
  },
  methods: {
    // 这个函数只执行了一次，需要执行多次才能实时监测数据的变化
    // 这个函数需要被外部执行
    UseHide(){
      // 获取dom  
    var Primary =document.getElementById("Primary")
      Primary.style.display='none';  
    }, 
    // 使用点击关闭窗口事件,同时清空输入框里面的所有值
    CloseWindow(){
      this.UseHide()
      // 传递数据，使得ContextFrist再次启用滑轮监视器
      this.scorllfrist=true
      bus.$emit('scorll',this.scorllfrist)
      // 传递给App
       bus.$emit('Cancel',this.Cancelfrist,this.CloneFrist)
      //  传递值给third
      bus.$emit('CloseAll',this.CloseAll)
    },
    MoveScorll(){
      // var scorllTop =document.body.scroll || document.documentElement.scroll
      var scorll =document.getElementById('DynamicCss')
      scorll.style.top=0+'px'
    }
  },  
   
   mounted() {
       this.UseHide()  
    },
};

</script>

<style lang="less" scoped>
.HidePrimary {
  z-index: 9999;
  width: 100%;
  height: 1170px;
  position: absolute;
  background-color: rgba(50,50,50,.88);
  // overflow: hidden;
  .Hidefrist {
    width: 816px;
    height: 1090px;
    background-color: #ffffff;
    margin: 35px auto;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    .CloseWindow{
      top: 20px;
      left: 20px;
      width: 44px;
      height: 44px;
      border: none;
      position: absolute;
      background-color: #ffffff;
      cursor: pointer;
      .Frist{
        display: block;
        height: 36px;
        width:  36px;
        background: #e8e8ed;
        border-radius: 50%;
        position: relative;
        .icon{
          top: 9px;
          left: 11px;
          position: absolute;
        }
      }
    }
   .ContxtMain{
     padding-top: 74px;
     padding-bottom: 50px;
     width: 816px;
     height: 966px;
    .Fristone{
     width: 100%;
     height: 100%;
    }
   }
  }
}
</style>